<template>
  <a-dropdown class="contanier">
    <a class="ant-dropdown-link" @click.prevent>
      <a-avatar :src="tool.getAssetsFile('avatar.png')" :size="24" />
      admin
      <DownOutlined />
    </a>
    <template #overlay>
      <a-menu>
        <a-menu-item key="1" :style="{ cursor: 'not-allowed' }">
          当前角色：{{ roles.includes("super") ? "超级管理员" : "管理员" }}
        </a-menu-item>
        <a-menu-item key="2" @click="onToggleRole">
          切换角色：{{ roles.includes("super") ? "管理员" : "超级管理员" }}
        </a-menu-item>
        <a-menu-item key="3">
          <SvgIcon
            name="header-change"
            class="menu-item-svg"
            :class-value="{ width: '20px', height: '20px' }"
            :color="fontColor"
          >
          </SvgIcon>
          修改密码
        </a-menu-item>
        <a-menu-item key="4" @click="onLogout">
          <SvgIcon
            name="header-exit"
            class="menu-item-svg"
            :color="fontColor"
            :class-value="{ width: '20px', height: '20px' }"
          ></SvgIcon>
          退出登录
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>
<script lang="ts" setup>
import { useUserStore } from "@/store/modules/User";
import { useRouter } from "vue-router";
import { computed, getCurrentInstance, ref, watch } from "vue";
import { useLayoutStore } from "@/store/modules/Layout";
import { DownOutlined } from "@ant-design/icons-vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
import { message, Modal } from "ant-design-vue";
import UserService from "@/service/userService";
import tool from "@/util/imgTool.js";

const userStore = useUserStore();
const $router = useRouter();
const instance = getCurrentInstance();
const layoutStore = useLayoutStore();
const fontColor = ref(
  layoutStore.$state.themeType === "default" ? "#000" : "#fff"
);

watch(
  () => layoutStore.$state.themeType,
  (newVal) => {
    fontColor.value = newVal === "default" ? "#000" : "#fff";
  }
);

const onLogout = () => {
  const modal = Modal.confirm({});
  modal.update({
    title: "温馨提示",
    content: "您是否确认退出登录?",
    okText: "确定",
    cancelText: "取消",
    onOk: () => {
      userStore.removeUserInfo();
      $router.push("/login");
    },
  });
};
const onToggleRole = async () => {
  await UserService.login({
    username: roles.value.includes("super") ? "admin" : "super",
    password: "123",
  })
    .then((result) => {
      instance && instance.proxy?.$forceUpdate();
      $router.go(0);
    })
    .catch((err) => {
      message.error(err);
    });
};
const roles = computed((): Array<String> => {
  return JSON.parse(localStorage.getItem("userInfo") || "{}").roles;
});
</script>
<style lang="less" rel="stylesheet/less" scoped>
.menu-item-svg {
  margin: -6px 4px -6px 0;
}
</style>
